<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useAuditProduct } from '@fl/api/man-api'
import FlUpload from '@fl/components/fl-upload.vue'
import SubmitBtn from '@fl/components/submit-btn.vue'
import { multipleFileJsonObj } from '@fl/utils/fn'
import { cloneDeep, isEmpty } from 'lodash-es'

const props = withDefaults(defineProps<{
    reasonData?: {
        productAuditAttachment?: string
        productAuditFailReason?: string
    }
}>(), {
    reasonData: () => ({}),
})
const id = defineModel<string>('id', { required: true })
const visible = defineModel<boolean>('visible', { required: true })

const route = useRoute()
const router = useRouter()

const initialState = {
    productAuditAttachmentList: [],
} as any
const state = ref(cloneDeep(initialState))

const isApprove = computed(() => isEmpty(props.reasonData))

const { isPending: isAuditProductPending, mutate: auditProduct } = useAuditProduct()

// #region Form
const formRef = ref()
const isSubmitLoading = computed(() => isAuditProductPending.value)

const columns = computed<PlusColumn[]>(() => ([
    {
        label: '驳回理由',
        prop: 'reason',
        valueType: isApprove.value ? 'textarea' : 'text',
    },
    {
        label: isApprove.value ? '上传附件' : '附件',
        prop: 'productAuditAttachmentList',
    },
]))

const rules = computed(() => isApprove.value
    ? {
            reason: [
                {
                    message: '请输入驳回理由',
                    required: true,
                    trigger: 'change',
                },
            ],
        }
    : {})
// #endregion

// #region UI Listener
function onSubmitBtnClick() {
    formRef.value.handleSubmit()
}

function submit() {
    const data = cloneDeep(state.value)
    const params = {
        ...data,
        auditType: route.query.auditType as string,
        id: id.value,
        productAuditAttachment: JSON.stringify(data.productAuditAttachmentList),
        productAuditAttachmentList: undefined,
        status: 3,
    }

    auditProduct(params, {
        onSuccess() {
            ElMessage.success('操作成功')
            closed()
            router.back()
        },
    })
}

function onCancelBtnClick() {
    closed()
}

function closed() {
    visible.value = false
    state.value = cloneDeep(initialState)
    formRef.value.formInstance?.resetFields()
}
// #endregion

watchEffect(() => {
    if (!isApprove.value) {
        Object.assign(state.value, {
            productAuditAttachmentList: multipleFileJsonObj(props.reasonData.productAuditAttachment || '[]'),
            reason: props.reasonData.productAuditFailReason,
        })
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                title="审核拒绝"
                width="700"
                close-on-press-escape
                :has-footer="isApprove"
                @closed="closed"
    >
        <PlusForm ref="formRef"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="rules"
                  :has-footer="false"
                  @submit="submit"
        >
            <template #plus-field-productAuditAttachmentList>
                <FlUpload v-model="state.productAuditAttachmentList"
                          tips
                          is-mall-admin
                          accept=".jpg,.png,.jpeg,.pdf"
                          list-type="text"
                          :disabled="!isApprove"
                />
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="onCancelBtnClick">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isSubmitLoading"
                           @click="onSubmitBtnClick"
                >
                    提交
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
